<template>
  <div class="gi_table_page">
    <GiTable
      row-key="id"
      :data="dataList"
      :columns="columns"
      :loading="loading"
      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
      :pagination="pagination"
      :disabled-tools="['size']"
      :disabled-column-keys="['name']"
      :summary="summaryData"
      @cell-click="cellRow"
      @refresh="search"
    >
      <template #top>
        <GiForm v-model="queryForm" search :columns="queryFormColumns" size="medium" @search="search" @reset="reset" />
      </template>
      <template #toolbar-center>
        <span>{{ titles.join(',') }}</span>
        <span>{{ `${queryForm.businessTime[0]} 至 ${queryForm.businessTime[1]}` }}</span>
      </template>
      <template #toolbar-right>
        <a-button @click="onExport">
          <template #icon><icon-download /></template>
          <template #default>导出</template>
        </a-button>
      </template>
    </GiTable>
  </div>
</template>

<script setup lang="ts">
import { Message, type TableInstance } from '@arco-design/web-vue'
import { type GeneralQuery, generalProject, generalProjectExport } from '@/apis/cakerun/board'
import { useDownload, useTable } from '@/hooks'
import type { ColumnItem } from '@/components/GiForm'
import { listAllBrand } from '@/apis/cakerun/brandAccount'

const brandInfo = ref<any[]>([])

const getBrandInfos = () => {
  listAllBrand({ enable: true }).then((res) => {
    const items: any = []
    res.data.forEach((item) => {
      items.push({ label: item.brand, value: item.id })
    })
    brandInfo.value = items
  })
}
const formatToday = () => {
  const today = new Date()
  const date = new Date(today.getTime() - 86400000)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}
getBrandInfos()
const queryForm = reactive<GeneralQuery>({
  businessTime: [formatToday(), formatToday()],
})

const onExport = () => {
  Message.info('文件正在下载中，请稍后.....')
  useDownload(() => generalProjectExport(queryForm))
}
const titles = ref<string[]>([])
const queryFormColumns: ColumnItem[] = reactive([
  {
    type: 'select',
    label: '品牌',
    field: 'accountIds',
    span: { xs: 24, sm: 8, xxl: 8 },
    props: {
      options: brandInfo,
      placeholder: '请选择品牌',
      multiple: true,
      onChange: (value) => {
        titles.value = []
        value.forEach((item) => {
          brandInfo.value.forEach((item2) => {
            if (item2.value.toString() === item.toString()) {
              titles.value.push(item2.label)
            }
          })
        })
      },
    },
  },
  {
    type: 'range-picker',
    label: '业务时间',
    field: 'businessTime',
    span: { xs: 24, sm: 10, xxl: 8 },
    props: {
      showTime: false,
      format: 'YYYY-MM-DD',
    },
  },
])
const {
  tableData: dataList,
  loading,
  pagination,
  search,
  summary,
} = useTable((page) => generalProject({ ...queryForm, ...page }), { immediate: true })
const columns: TableInstance['columns'] = [
  {
    title: '品牌',
    dataIndex: 'accountName',
    slotName: 'accountName',
    align: 'center',
  },
  { title: '总金额', dataIndex: 'totalDue', slotName: 'totalDue', align: 'center' },
  { title: '蛋糕数量', dataIndex: 'cakeCount', slotName: 'cakeCount', align: 'center' },
  { title: '蛋糕金额', dataIndex: 'cakeDue', slotName: 'cakeDue', align: 'center' },
  { title: '业务时间', dataIndex: 'businessTime', slotName: 'businessTime', align: 'center' },
]

// 重置
const reset = () => {
  search()
}

const cellRow = (record: any, column: any) => {
  const data = record[column.slotName]
  if (data) {
    navigator.clipboard.writeText(data).then(() => {
      Message.success('复制成功')
    })
  }
}

const summaryData = () => {
  if (summary && summary.value) {
    return [{
      accountName: '合计',
      cakeCount: summary.value.cakeCount,
      cakeDue: summary.value.cakeDue,
      totalDue: summary.value.totalDue,
    }]
  }
}
</script>

<style scoped lang="scss">
:deep(.arco-table-td-content){
  cursor: pointer;
}
</style>
